<template>
    <div id="layerTree">
        <div class="divisionDiv" style="margin-bottom:15px">
            <img src="../../assets/img/底图切换.png"/>
        </div>
        <el-row>
            <el-col :span="12">
                <div class="grid-content bg-purple" align="center">
                    <img @click='layeradd' src="../../assets/img/vector.png"/>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light" align="center">
                    <img src="../../assets/img/image.png"/>
                </div>
            </el-col>
        </el-row>
            <div class="divisionDiv" style="margin-top:15px">
            <img src="../../assets/img/专题图层.png"/>
        </div>
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="专题图层1" name="1">
                <ul class="list-group">
                    <li class="list-group-item">
                        <el-switch v-model="value3"></el-switch>天地图
                        <el-slider v-model="value2"></el-slider>
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                        <el-slider v-model="value2"></el-slider>
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                        <el-slider v-model="value2"></el-slider>
                    </li>
                </ul>
            </el-collapse-item>
            <el-collapse-item title="专题图层2" name="2">
                <ul class="list-group">
                    <li class="list-group-item">
                        <el-switch v-model="value3"></el-switch>天地图
                        <el-slider v-model="value2"></el-slider>
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                        <el-slider v-model="value2"></el-slider>
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                        <el-slider v-model="value2"></el-slider>
                    </li>
                </ul>
            </el-collapse-item>
            <el-collapse-item title="专题图层3" name="3">
                <ul class="list-group">
                    <li class="list-group-item">
                        <el-switch v-model="value3"></el-switch>天地图
                        <el-slider v-model="value2"></el-slider>
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                        <el-slider v-model="value2"></el-slider>
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                        <el-slider v-model="value2"></el-slider>
                    </li>
                </ul>
            </el-collapse-item>
            <el-collapse-item title="专题图层4" name="4">
                <ul class="list-group">
                    <li class="list-group-item">
                        <el-switch v-model="value3"></el-switch>天地图
                        <el-slider v-model="value2"></el-slider>
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                        <el-slider v-model="value2"></el-slider>
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                        <el-slider v-model="value2"></el-slider>
                    </li>
                </ul>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
  import {MapboxUtil} from '../../assets/js/Utils/MapboxUtil.js'
  export default {
    data() {
      return {
        mapboxUtil:null,
        activeName: '1',
        value2:50,
        value3: true,
        value4: true
      };
    },
    beforeMount(){
        this.mapboxUtil = new MapboxUtil();
    },
    methods:{
        layeradd(){
            this.mapboxUtil.RasterLayerAdd();
        }
    }

  }
</script>

<style>
    #layerTree
      {
          position:relative;
          height: 100%;
          /* top: 30px;
          left: 64px; */
          z-index:999;
      }

      #layerTree .divisionDiv{
          height: 30px;
      }
      #layerTree .divisionDiv>img{
            height: 100%;
            float: right;
      }
      #layerTree .el-collapse-item{
          width: 100%;
      }

      #layerTree .el-collapse-item__content{
        padding-bottom: 0px;
      }

      #layerTree .list-group-item{
        border:0px;
        padding-bottom: 2px;
        padding: 0.7rem 0.5rem;
     }
      #layerTree .el-switch{
        padding:10px;  
     }

      #layerTree .bg-purple {
        background:white;
     }
      #layerTree .bg-purple-light {
        background: white;
     }

      #layerTree .grid-content {
        border-radius: 0px;
        min-height: 45px;
     }
</style>

